<template>
    <div class="footer">
        <div class="link">
                <router-link class="today" to="/today" >
                    <el-icon class="today-icon"><HomeFilled /></el-icon>
                    <span>today</span>
                </router-link>
        
                <router-link to="/discovery" class="discovery">
                    <i  class="iconfont icon-faxian"></i>
                    <span>发现</span>
                </router-link>
                <router-link to="/bookmarks" class="bookmarks">
                    <i  class="iconfont icon-rizhiguanli"></i>
                    <span>摘抄本</span>
                </router-link>
                <router-link to="my" class="my">
                    <el-icon class="my-icon"><UserFilled /></el-icon>
                    <span>我</span>
                </router-link>
        </div>
       
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.footer{
  position: fixed;
  bottom: 0;
  height: 4rem;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  text-align: center;
  width: 100%;
  font-weight: 400;
  font-size: 1rem;
  color: #6B7280;
  display: flex;
  padding: 0.8rem 0.5rem 0.5rem  0.55rem;
  box-sizing: border-box;
  .link{
    display: flex;
    justify-content: space-around; 
    width: 100%;
        .today, .discovery, .bookmarks, .my {
            display: flex;
            flex-direction: column;
            align-items: center;
            color:#7B68EE !important;
            margin: 0 20px 0 20px;
            .today-icon, .iconfont, .my-icon {
                width: 16px;
                height: 16px;
                padding: 5px;
                font-size: 16px; 
            }
        }
    
    }
    
 
  }
   



</style>